<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>画板</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    let canvas = document.getElementById("canvas")
    canvas.width = document.documentElement.clientWidth
    canvas.height = document.documentElement.clientHeight
    //画线

    let ctx = canvas.getContext("2d");

    ctx.fillStyle = "black";
    ctx.strokeStyle = "none";
    ctx.lineWidth = 10;
    ctx.lineCap = "round";


    function drawLine(x1, y1, x2, y2) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
    }


    let painting = false
    let last

    let isTouchDevice = "ontouchstart" in document.documentElement
    console.log(isTouchDevice)

    if (isTouchDevice) {
        canvas.ontouchstart = (e) => {
            let x = e.touches[0].clientX
            let y = e.touches[0].clientY
            //console.log(x, y)
            last = [x, y]
        }
        canvas.ontouchmove = (e) => {
            let x = e.touches[0].clientX
            let y = e.touches[0].clientY
            drawLine(last[0], last[1], x, y)
            last = [x, y]
        }

    } else {
        canvas.onmousedown = (e) => {
            painting = true
            last = [e.clientX, e.clientY]
        }

        canvas.onmousemove = (e) => {
            if (painting === true) {
                drawLine(last[0], last[1], e.clientX, e.clientY)
                last = [e.clientX, e.clientY]

            }

        }
        canvas.onmouseup = (e) => {
            painting = false
        }
    }


</script>
</body>
</html>